<!--
 * @Date: 2023-11-28 16:06:28
 * @LastEditors: Please set LastEditors
 * @gitee: https://gitee.com/chun22222222
 * @github: https://github.com/chun222
 * @Desc: 
 * @LastEditTime: 2023-12-14 09:27:04
 * @FilePath: \easy_dashboard\web\src\views\base\login.vue
-->
<template>
  <div class="box">
    <div class="login">
      <h2>{{ state.title }}</h2>
      <a-form
        ref="formRef"
        :model="formState"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-form-item
          label="用户名"
          name="loginname"
          :rules="[{ required: true, message: '请输入用户名' }]"
        >
          <a-input v-model:value="formState.loginname" />
        </a-form-item>

        <a-form-item
          label="密码"
          name="password"
          :rules="[{ required: true, message: '请输入密码' }]"
        >
          <a-input-password v-model:value="formState.password" />
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <!-- <a-button
            :loading="load"
            type="primary"
            @click="onSubmit"
          >
            登录
          </a-button> -->
          <button
            @click="onSubmit"
          >
            登录
          </button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
	import {userCounterStore} from '@/store/module/user'
	import {login} from '../../../src/api/module/BaseLogin'
	import { message, Modal } from "ant-design-vue";
	import { reactive, ref, computed, onMounted, onUnmounted, toRef } from "vue";
	import { useRoute,useRouter } from "vue-router";
	export default {
		setup() {
			const load = ref(false)
			// 使用pinia
			const userCounter = userCounterStore()

			const formRef = ref()
			const router = useRouter()
			const state = reactive({
				title: '可配置大屏'
			})
			const formState = reactive({
				loginname: "111", password: "666", kick:99
			})

			// 验证后提交
			const onSubmit = async () => {
				load.value = true
				formRef.value.validate().then(async () => {
					userCounter.login(formState).then((re)=>{
						console.log("调用接口的re",re);
						router.push("/data/list")

					}).catch((error)=>{
						message.error(error);
					})
				}).catch((err) => {
					message.error(err);
				});
			}
			return {
				formRef,
				state,
				formState,
				onSubmit,
				load
			}
		}
	}
</script>
<style scoped>
.box {
  width: 100%;
  height: 100%;
  background-image: url(../../static/loginbg.jpg);
  background-size: cover;
  background-position: center;
}

h2 {
  margin: 30px auto;
  color: rgb(0, 0, 0);
}

.login {
  display: block;
  /* 绝对定位 */
  position: absolute;
  /* 左右方向为50%，上下方向为黄金比例0.618 */
  transform: translate(-50%, -61.8%);
  left: 50%;
  top: 50%;
  width: 450px;
  background-color: rgb(255, 255, 255) !important;
  /* 登录框的四个角为圆角 */
  border-radius: 8px;
  text-align: center;
}

.ant-form-item {
  width: 345px;
}
</style>